<template>
	<view class="content">
		<view class="top_title">
			选择专享会员卡类型
		</view>
		<view class="list">
			<view @click="select(index)" class="item" :class="{'select':index==selectindex}" v-for="(item,index) in lists" :key="index">
				{{item}}
			</view>
		</view>
		<view class="bottom">
		<view class="money_text">支付金额</view>
		<view class="money">¥{{total_price}}</view> 
			
		<view class="pay_lable" @click="show">支付说明</view>
		<view class="btn" @click="pay">立即支付</view>	
		</view>
		
		<view class="bg" v-if="isshow">
			<view class="label">
				<view class="title">支付说明：</view>
				<view>
					<text>
						1.要购买的会员卡与已购会员卡相同则为续费；
					</text>
					<text>
						2.要购买的会员卡高于已购的会员卡时，则计算并减去余额再付款；付款后会员卡直接立即升级；原有会员卡时效不变；
					</text>
					<text>3.要购买的会员卡等级低于已购会员卡，则已购会员卡到期后，等级降到此次购买的会员卡等级</text>
				</view>
				<view class="label_btn" @click="show">
					确认
				</view>
			</view>
		</view>
		<pay-popuper ref="popuper" :realPay="total_price"></pay-popuper>
	</view>
</template>

<script>
	import payPopuper from './components/pay-popuper'
	export default {
		data() {
			return {
				lists: ['一学年', '二学年', '三学年', '四学年', '五学年', '六学年'],
				selectindex: 0,
				total_price: 0,
				isshow:false,
				data:''
			}
		},
		components: {
			payPopuper
		},
		onLoad(e) {
			this.data=JSON.parse(decodeURIComponent(e.data));
			this.total_price=this.data.charge_cion*(this.selectindex+1);
		},
		methods: {
			select: function(index) {
				this.selectindex = index;
				this.total_price=this.data.charge_cion*(this.selectindex+1);
			},
			pay: function() {
				var _this=this;
				var data={
					charge_type_id:this.data.charge_type_id,
					subject_string:this.data.subject,
					pay_type:'wx',
					year_num:(this.selectindex+1),
					children_id:this.data.children_id
				}
				
				this.$zapi.apiPost('user/charge.User/AddChargeOrder',data).then(res=>{
					var datas=res.data;
					console.log(data);
					if(datas.code==200){
						data.charge_order_sn=datas.data.charge_order_sn;
						_this.$refs.popuper.goPay(data);
					}else{
						uni.showToast({
							title: datas.msg,
							icon:'none'
						});
					}
				});
				
			},
			show:function(){
				this.isshow=!this.isshow
			}
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.top_title{
		margin: auto;
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		color: #4A4034;
		font-size: 34upx;
	}
	.list {
		width: 92%;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.item {
			margin-top: 20upx;
			width: 214upx;
			height: 80upx;
			border-radius: 8upx;
			background: rgba(247, 247, 247, 1);
			text-align: center;
			line-height: 80upx;
			color: #666666;
			margin-right: 20upx;
		}
	}

	.item:nth-child(3n) {
		margin-right: 0upx !important;
	}

	.select {
		background: #FF9900 !important;
		color: #fff !important;
	}


	.bottom{
		position: absolute;
		bottom: 0upx;
		width: 92%;
		left: 4%;
		padding-bottom: 30upx;
		.money_text{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			color: #4A4034;
			font-size: 34upx;
		}
		.money{
			color: #4A4034;
			font-size: 68upx;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 150upx;
		}
		.pay_lable{
			margin-bottom: 10upx;
			color: #FF9900;
			font-size: 34upx;
			text-decoration: underline;
		}
		.btn {
			margin: auto;
			width: 100%;
			height: 80upx;
			border-radius: 4px;
			background: #FF9900;
			text-align: center;
			line-height: 80upx;
			font-size: 34upx;
			color: #FFFFFF;
		}
	}

	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		background:rgba(0,0,0,.4);
		.label{
			position: relative;
			top: 220upx;
			width: 566upx;
			height: 648upx;
			border-radius: 12upx;
			background: #fff;
			margin: auto;
			.title{
				width: 92%;
				margin: auto;
				font-size: 34upx;
				padding-top: 40upx;
			}
			text{
				line-height: 45upx;
				width: 92%;
				margin: auto;
				margin-top: 15upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				color: #999999;
				font-size: 30upx;
			}
			.label_btn{
				width: 100%;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				font-size: 32upx;
				color:#FF9900;
				margin-top: 40rpx;

			}
		}
		}
</style>
